import { defineComponent, reactive, ref, UnwrapRef } from 'vue';
import { IntentionFormState } from '../types/form.interface';
import { DatePicker, Form, Input, Select, Switch } from 'ant-design-vue';
import moment, { Moment } from 'moment';

export default defineComponent({
  name: 'create',
  // components: { Form, Input },
  setup() {
    const formState: UnwrapRef<IntentionFormState> = reactive({
      intention_openid: 'aaa',
      weixin_id: '',
      intention: '',
      description: '',
      intention_status: 0,
      group_qrc: '',
      start_date: moment(),
    });

    const formAttr = {
      model: formState,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };

    const label = 'input';

    return () => (
      <>
        <div>
          <Form {...formAttr}>
            <Form.Item label={label}>
              <Input v-model={[formState.intention_openid, 'value']} />
            </Form.Item>
            <Form.Item label="时间">
              <DatePicker v-model={[formState.start_date, 'value']} />
            </Form.Item>
          </Form>
        </div>
      </>
    );
  },
});
